
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xim/business/model/user.dart';
import 'package:xim/common/util/collection.dart';
import 'package:xim/widget/switch_widget/switch_widget.dart';

/// 聊天会话详情页面
class ChatRoomInfoPage extends StatelessWidget {
  ChatRoomInfoPage({Key? key}) : super(key: key);

  PreferredSizeWidget? get appBar => AppBar(
    title: const Text("聊天消息", style: TextStyle(fontSize: 16),),
    centerTitle: true,
  );

  String avatar = "https://upload.jianshu.io/users/upload_avatars/9547801/bb70e361-d8be-4f50-a4bc-1a1079c1d2f1.jpg";

  /// 页面背景颜色
  Color pageBgColor = const Color(0xfff8f8f8);
  /// 页面前景颜色
  Color pageFgColor = const Color(0xffffffff);
  /// 消息栏 padding
  EdgeInsets? infoBarPadding = const EdgeInsets.symmetric(vertical: 12, horizontal: 12);
  /// 消息栏 垂直 margin
  double infoBarVerticalMargin = 8;
  /// 消息栏 border
  BorderSide infoBarBorderSide = const BorderSide(color: Color(0xffececec), width: 0.6);
  /// 成员框 padding
  EdgeInsets memberBoxPadding = const EdgeInsets.symmetric(vertical: 16, horizontal: 8);
  /// 成员框 margin
  EdgeInsets memberBoxMargin = const EdgeInsets.only(bottom: 18);
  /// 展示的成员上限个数
  int showMemberCount = 9;
  /// 每行展示的成员个数
  int rowMemberCount = 5;
  /// 成员框大小
  double memberBoxSize = 60;

  late BoxBorder infoBarBorder = Border.symmetric(horizontal: infoBarBorderSide);

  late List<User> userMemberList = [
    User(id: "1", name: "kzou", avatar: avatar),
    User(id: "2", name: "Hanlinger", avatar: avatar),
    User(id: "2", name: "Hanlinger", avatar: avatar),
    // User(id: "3", name: "Xmei", avatar: avatar),
    // User(id: "4", name: "Xhong", avatar: avatar),

  ];
  /// 聊天室名称
  String roomName = "Cloud标准化";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar,
      body: Container(
        color: pageBgColor,
        child: Column(
          children: [
            Container(
              width: 1.sw,
              padding: memberBoxPadding,
              margin: memberBoxMargin,
              decoration: BoxDecoration(color: pageFgColor,),
              child: Column(
                children: [
                  GridView(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: rowMemberCount,
                        mainAxisSpacing: 18,
                        childAspectRatio: 1
                    ),
                  children: userMembersBox(),
                  ),
                  memberMoreHintWidget
                ],
              ),
            ),
            Column(
              children: <Widget>[
                arrowRowBar(title: "聊天组名称", hint: roomName, isShowArrowIcon: true, bgColor: pageFgColor, padding: infoBarPadding, isShowBorder: true, border: infoBarBorder),
                arrowRowBar(title: "查询聊天记录", isShowArrowIcon: true, bgColor: pageFgColor,padding: infoBarPadding,isShowBorder: true, border: infoBarBorder),
                Column(
                  children: [disturbInfoBar,   topRoomInfoBar,   ],
                ),
                clearChatHistory,
                existRoom
              ].splitJoin(SizedBox(height: infoBarVerticalMargin,)),
            )
          ],
        ),
      ),
    );
  }

  Widget get memberMoreHintWidget => showMemberCount < userMemberList.length ? const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      SizedBox(height: 6,),
      Text("查看更多成员"),
      SizedBox(width: 6,),
      Icon(Icons.arrow_forward_ios_outlined, size: 14,)
    ],
  ):const SizedBox();

  Widget get disturbInfoBar => arrowRowBar(
    title: "消息免打扰",
    bgColor: pageFgColor,
    padding: infoBarPadding,
    isShowBorder: true,
    border: Border(top: infoBarBorderSide),
    customRightWidget: FlutterSwitch(value: true, onToggle: (bool value) {  }, height:26, width: 48,)
  );

  Widget get topRoomInfoBar => arrowRowBar(
      title: "置顶聊天",
      bgColor: pageFgColor,
      padding: infoBarPadding,
      isShowBorder: true,
      border: Border(bottom: infoBarBorderSide),
      customRightWidget: FlutterSwitch(value: true, onToggle: (bool value) {  }, height:26, width: 48,)
  );

  Widget get existRoom => arrowRowBar(
      isShowArrowIcon: false,
      customCenterWidget: const Text("退出该群聊", style: TextStyle(color: Colors.red, fontSize: 16),),
      bgColor: pageFgColor,
      padding: infoBarPadding
  );

  Widget get clearChatHistory => arrowRowBar(
      isShowArrowIcon: false,
      customCenterWidget: const Text("清空聊天记录", style: TextStyle(color: Colors.cyan, fontSize: 16),),
      bgColor: pageFgColor,
      padding: infoBarPadding
  );

  List<Widget> userMembersBox(){
    var inviteIconBox =  userMemberIcon(height: memberBoxSize, width: memberBoxSize);
    return userMemberList
        .slice(end: showMemberCount)
        .map((e) => userMember(e, width: memberBoxSize, height: memberBoxSize))
        .toList().addPlus(inviteIconBox);
  }

  Widget userMemberIcon({double? height, double? width, double strokeWidth=1}){
    return Container(
      height: height,
      width: width,
      padding: const EdgeInsets.all(6),
      child: DottedBorder(
        color: Colors.grey,
        radius: const Radius.circular(12),
        dashPattern: const [4, 4, 4, 4],
        strokeWidth: strokeWidth,
        child: const Center(
          child: Icon(Icons.add_outlined, size: 28, weight: 8,),
        ),
      ),
    );
  }

  Widget userMember(User user, {double? height, double? width, TextStyle? textStyle}){
    return SizedBox(
      height: height,
      width: width,
      child: Column(
        children: [
          ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(8)),
              child: Image.network(user.avatar, width: 50,)
          ),
          Text(user.name, style: textStyle,)
        ],
      ),
    );
  }

  Widget getRowBar(Widget? leftWidget,Widget? rightWidget, Function()? onTap, {
    Color? bgColor,
    EdgeInsets? padding,
    BoxBorder? border,
    Widget? centerWidget
  }){
    return InkWell(
      onTap: ()=> onTap?.call(),
      child: Container(
        padding: padding,
        decoration: BoxDecoration(
          color: bgColor,
          border: border,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            leftWidget ?? const SizedBox(),
            centerWidget ?? const SizedBox(),
            rightWidget ?? const SizedBox(),
          ],
        ),
      ),
    );
  }

  Widget arrowRowBar({
    String? title,
    String? hint,
    Function()? onTap,
    bool isShowArrowIcon=false,
    Widget? customRightWidget,
    Color? bgColor,
    EdgeInsets? padding,
    bool isShowBorder=false,
    BoxBorder? border,
    Widget? customCenterWidget,
    Widget? customLeftWidget,
  }){
    var icons = const Icon(Icons.arrow_forward_ios_outlined, size: 14,);
    var leftWidget = customLeftWidget ?? (title!=null? Text(title, style: const TextStyle(fontSize: 16),):null);
    var rightWidget = customRightWidget ?? Row(
      children: [
        if(hint != null) Text(hint, style: const TextStyle(fontSize: 13, color: Colors.grey), ),
        if (hint != null && isShowArrowIcon) const SizedBox(width: 4,),
        if( isShowArrowIcon ) icons
      ],
    );
    border = isShowBorder? border ?? const Border.symmetric(horizontal: BorderSide(color: Colors.grey)): null;
    return getRowBar(
        leftWidget,
        rightWidget,
        onTap,
        bgColor: bgColor,
        padding: padding,
        border: border,
        centerWidget: customCenterWidget);
  }

}
